// Vuex / Pinia（状态管理）
// Vuex（Vue 2/3）或 Pinia（Vue 3 推荐）集中管理状态，适合复杂应用



// $refs（直接访问子组件）
//     父组件通过 ref 获取子组件实例（需谨慎使用）。
//     <!-- 父组件 -->
//     <Child ref="childRef" />
//     <script>
//     export default {
//         mounted() {
//             this.$refs.childRef.childMethod(); // 调用子组件方法
//         }
//     }
//     </script>

 ✅Vue 2 中：$attrs 和 $listeners

示例结构：
 <parent>
  <child id="my-id" @click="handleClick" />
</parent>

子组件中：
export default {
  props: ['title'], // 只接收 title
  created() {
    console.log(this.$attrs);    // { id: 'my-id' }
    console.log(this.$listeners); // { click: fn }
  }
}

 作用：
    $attrs: 获取非 prop 的 attribute（比如 id, class）
    $listeners: 获取没有通过 props 显式定义的事件回调

透传给子组件（手动绑定）：
<!-- 子组件模板 -->
<button v-bind="$attrs" v-on="$listeners">点击我</button>


✅ Vue 3 中：只保留了 $attrs
    Vue 3 把 $listeners 移除了，将所有“未声明的 props + 所有事件”统一放在 $attrs 中。

// setup() 中
setup(props, { attrs }) {
  console.log(attrs); // 包含未声明的属性 + 所有事件监听
}

或在 this.$attrs 中访问（选项式 API）：
export default {
  props: ['title'],
  mounted() {
    console.log(this.$attrs); // 包含 id + onClick 等事件
  }
}

透传示例（推荐组合式写法）：
<template>
  <button v-bind="attrs">按钮</button>
</template>

<script setup>
defineProps(['title']) // 声明需要的 props

const { attrs } = useAttrs(); // 获取透传属性 + 事件
</script>




// $attrs / $listeners（透传属性和事件）
// Vue 2：$attrs（非 props 属性）和 $listeners（事件）可跨级传递。
// Vue 3：合并为 $attrs（包含属性和事件）。





// Local Storage / Session Storage
// 通过浏览器存储实现数据共享（需注意响应式更新问题）。
